<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML网页Margin,Border,Padding</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../../libs/jquery/3.2.1/jquery.js"></script>
</head>
<script>
    function getElementSize(_el){
        let el = $(_el);
        console.log(el);
        return `[${el.width()}, ${el.height()}, ${el.outerWidth(true)-el.width()}, ${el.outerHeight(true)-el.height()}]`;
    }
    $(document).ready(function () {
        var result = [];
        var html = $(document.documentElement);
        var body = $(document.body);
        console.log(html);
        console.log(body);
        result.push(`html=[${getElementSize(html)}]` );
        result.push(`body=[${getElementSize(body)}]` );
        $('#app').html(result.join('<br>'));
        let hhh = el.width();
        console.log(hhh);
    })
</script>

<body>
    <div id="app">
    </div>
</body>

</html>